package com.example.composewanandroid.ui.screens.home

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import com.example.composewanandroid.ui.screens.home.answer.AnswerScreen
import com.example.composewanandroid.ui.screens.home.explore.ExploreScreen
import com.example.composewanandroid.ui.screens.home.square.SquareScreen
import kotlinx.coroutines.launch

@Composable
fun HomeScreen(
    navHostController: NavHostController
) {

    Column(Modifier.fillMaxSize()) {
        //1. 这个为什么这样写呢？首先是创建一个列表数据，然后要用remember进行包裹，避免重组以后重新创建。
        //写在column的里外的区别：作用域限制：title只能在 Column的 lambda 作用域内访问（即 {}内部）。如果 title​​只在 Column内部使用​​，且不需要被其他组件共享，这种写法是合理的。
        //优先写在外部​​：除非 title仅在 Column内部使用且逻辑简单，否则推荐将状态提升到函数作用域顶层，提高代码可读性和可维护性。
        val titles = remember { listOf("首页","广场","问答") }

        //2. 这是一个​​状态持有对象​​，专门用于管理分页组件,他有几个关键属性：currentPage(当前页码)\pageCount总页数等等
        //pageCount = { titles.size } // 动态计算总页数
        val pagerState = rememberPagerState(pageCount = {titles.size})

        Box(
            modifier = Modifier.fillMaxWidth()
        ){
            WanTabRow(
                pagerState = pagerState,
                titles = titles,
                modifier = Modifier
                    .align(Alignment.Center)
                    .width(201.dp)
                    .height(48.dp)
            )
        }
        HorizontalPager(state = pagerState) { page ->
            when (page) {
                0 -> ExploreScreen()
                1 -> SquareScreen()
                else -> AnswerScreen()
            }
        }
//        Text("asdfasdfasdf", modifier = Modifier.clickable {
//            //进行页面跳转，点击返回键，也可以返回。
//            navHostController.navigate(RoutePath.login)
//
//        })

    }

}

@Composable
fun WanTabRow(pagerState: PagerState, titles: List<String>, modifier: Modifier = Modifier) {
    // 创建协程作用域用于处理动画（避免阻塞UI线程）
    val scope = rememberCoroutineScope()

    // 创建TabRow组件 - 用于显示水平标签栏
    TabRow(
        // 设置当前选中的标签索引（与分页状态同步）
        selectedTabIndex = pagerState.currentPage,
        modifier = modifier,
        // 设置标签栏背景色（使用Material主题）
        containerColor = MaterialTheme.colorScheme.background,
        // 自定义指示器（底部滑动条）
        indicator = { tabPositions ->
            Box(
                modifier = Modifier
                    // 将指示器定位到当前选中的标签位置
                    .tabIndicatorOffset(tabPositions[pagerState.currentPage])
                    // 设置指示器高度
                    .height(3.dp)
                    // 设置指示器顶部圆角
                    .clip(RoundedCornerShape(topStart = 3.dp, topEnd = 3.dp))
                    // 设置指示器颜色（使用主题主色）
                    .background(MaterialTheme.colorScheme.primary)
            )
        },
    ) {
        // 遍历所有标题创建对应的Tab
        titles.forEachIndexed { index, title ->
            Tab(
                // 设置当前Tab是否被选中（与分页状态比较）
                selected = pagerState.currentPage == index,
                onClick = {
                    // 在协程中执行分页动画（避免阻塞UI线程）
                    scope.launch {
                        // 平滑滚动到选中的页面
                        pagerState.animateScrollToPage(index)
                    }
                },
                // Tab的内容
                text = {
                    Text(
                        text = title,
                        style = MaterialTheme.typography.titleMedium.copy(
                            color = MaterialTheme.colorScheme.primary
                        )
                    )
                }
            )
        }
    }
}